import { bind_platform_application_info } from '@/services/instiution';
import { ActionType, ProDescriptions } from '@ant-design/pro-components';
import { Button, Divider, message, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
import PendAgree from './PendAgree';
import PendRefuse from './PendRefuse';
interface Iprops {
  isShowPendModal: (show: boolean) => void;
  isPendModalOpen: boolean;
  id: number | undefined;
  setSelectedKey: React.Dispatch<React.SetStateAction<string>>;
  actionRef2: React.MutableRefObject<ActionType | undefined>;
  actionRef3: React.MutableRefObject<ActionType | undefined>;
}
const PendCheck = (props: Iprops) => {
  const { isPendModalOpen, isShowPendModal, setSelectedKey, id, actionRef2, actionRef3 } = props;
  // 存储详情信息
  const [info, setInfo] = useState(undefined);
  // 待审批同意模态框状态
  const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false);
  // 控制待审批同意模态框的显示与隐藏
  const isShowAgreeModal = (status: boolean) => {
    setIsAgreeModalOpen(status);
  };
  // 待审批拒绝模态框状态
  const [isRefuseModalOpen, setIsRefuseModalOpen] = useState(false);
  // 控制待审批拒绝模态框的显示与隐藏
  const isShowRefuseModal = (status: boolean) => {
    setIsRefuseModalOpen(status);
  };
  // 页面初始化获取审批详情
  useEffect(() => {
    const getDate = async () => {
      let request_body = {
        id,
      };
      let params: any = await bind_platform_application_info(request_body);
      // console.log('待审批详情', params);
      if (params.msg == 'ok') {
        setInfo(params.data);
      } else {
        message.error('查看详情失败！');
      }
    };
    getDate();
  }, []);
  return (
    <Modal
      title="待审批"
      centered
      open={isPendModalOpen}
      onCancel={() => isShowPendModal(false)}
      destroyOnClose={true}
      width={1000}
      footer={[
        <div
          key="box"
          style={{
            position: 'absolute',
            left: '50%',
            transform: 'translateX(-50%)',
            bottom: '20px',
          }}
        >
          <Button
            key="cancellation"
            style={{ marginRight: '107px' }}
            onClick={() => {
              isShowRefuseModal(true);
            }}
          >
            拒绝
          </Button>
          <Button
            key="determine"
            type="primary"
            onClick={() => {
              isShowAgreeModal(true);
            }}
          >
            同意
          </Button>
        </div>,
      ]}
    >
      <Divider />
      {info === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <>
          <ProDescriptions
            style={{ padding: '0 20px' }}
            title="申请信息"
            column={4}
            request={async () => {
              return Promise.resolve({
                success: true,
                data: info,
              });
            }}
            columns={[
              {
                title: '机构名称',
                key: 'application_name',
                dataIndex: 'application_name',
              },

              {
                title: '机构编号',
                key: 'application_unique_code',
                dataIndex: 'application_unique_code',
              },
              {
                title: '机构账号',
                key: 'application_phone',
                dataIndex: 'application_phone',
              },
              {
                title: '申请人',
                key: 'username',
                dataIndex: 'username',
              },
              {
                title: '申请时间',
                key: 'create_time',
                dataIndex: 'create_time',
              },
              {
                title: '状态',
                key: 'status',
                dataIndex: 'status',
                valueType: 'select',
                valueEnum: {
                  0: {
                    text: '待审批',
                  },
                  1: {
                    text: '已同意',
                  },
                  2: {
                    text: '已拒绝',
                  },
                },
                render: (_: any, record) => (
                  <>
                    {record.status === 0 ? '待审批' : ''}
                    {record.status === 1 ? '已同意' : ''}
                    {record.status === 2 ? '已拒绝' : ''}
                  </>
                ),
              },
              {
                title: '申请原因',
                key: 'reason',
                dataIndex: 'reason',
              },
            ]}
          ></ProDescriptions>
          <br />
        </>
      )}
      <br />
      {/* 审批同意 */}
      {isAgreeModalOpen ? (
        <PendAgree
          isShowAgreeModal={isShowAgreeModal}
          isAgreeModalOpen={isAgreeModalOpen}
          isShowPendModal={isShowPendModal}
          setSelectedKey={setSelectedKey}
          actionRef2={actionRef2}
          actionRef3={actionRef3}
          id={id}
        ></PendAgree>
      ) : (
        ''
      )}
      {/* 审批拒绝 */}
      {isRefuseModalOpen ? (
        <PendRefuse
          isShowRefuseModal={isShowRefuseModal}
          isRefuseModalOpen={isRefuseModalOpen}
          isShowPendModal={isShowPendModal}
          setSelectedKey={setSelectedKey}
          actionRef2={actionRef2}
          actionRef3={actionRef3}
          id={id}
        ></PendRefuse>
      ) : (
        ''
      )}
    </Modal>
  );
};
export default PendCheck;
